<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta charset="UTF-8" />
<title>登录</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
	<div class="container">
		<header class="codrops-header">
		<h1>登录</h1>
		</header>
		<form action="login.do" method="post">
			<section class="content bgcolor-4"> 
			<span
				class="input input_login"> 
				<input
				class="input_field input_field_login" type="text" id="input-22" name="account" />
				<label class="input_label input_label_login" for="input-22">
			<span class="input_label-content input_label-content_login">Account</span>
			</label>
			</span> 
			<span class="input input_login"> 
			<input class="input_field input_field_login" type="password" id="input-23" name="password"/>
				<label class="input_label input_label_login" for="input-23">
					<span class="input_label-content input_label-content_login">Password</span>
			</label>
			</span>
			<div>
				<span class="input input_login">
					<button style="color: #2FA0E0;">登录</button> <a href="register.jsp"><button type="button" style="color: #2FA0E0;">注册</button></a>
				</span>
			</div>
			</section>
		</form>
	</div>
	<script src="js/classie.js"></script>
	<script>
		(function() {
			if (!String.prototype.trim) {
				(function() {
					var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
					String.prototype.trim = function() {
						return this.replace(rtrim, '');
					};
				})();
			}

			[].slice.call(document.querySelectorAll('input.input_field'))
					.forEach(function(inputEl) {
						if (inputEl.value.trim() !== '') {
							classie.add(inputEl.parentNode, 'input_filled');
						}
						inputEl.addEventListener('focus', onInputFocus);
						inputEl.addEventListener('blur', onInputBlur);
					});

			function onInputFocus(ev) {
				classie.add(ev.target.parentNode, 'input_filled');
			}

			function onInputBlur(ev) {
				if (ev.target.value.trim() === '') {
					classie.remove(ev.target.parentNode, 'input_filled');
				}
			}
		})();
	</script>
</body>
</html>